<template>
  <div class="blacklist-page">
    <Back-top></Back-top>
    <Nav active-name="blacklist"/>
    <div class="breadcrumb-holder flex-row-v-center">
      <div class="item">首页</div>
      <img class="arrow" src="~assets/img/icon-right-arrow.png" />
      <div class="item active">黑号查询</div>
    </div>
    <div class="sec-01">
      <div class="tip-box flex-center">请输入交易对象的QQ号、支付宝账号、微信号、电话号码等，谨防诈骗</div>
      <div class="search-holder">
        <div class="search-box flex-row-v-center">
          <input class="input flex-1" v-model="account" placeholder="请输入账号"/>
          <div class="search-btn flex-center" @click="verifyBlackAccount">
            点击查询
          </div>
        </div>
        <div class="result flex-center" v-if="result.show">
          {{result.txt}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Core from '@/core/core'
export default {
  data() {
    return {
      account: '',
      result: {
        show: false,
        txt: ''
      }
    }
  },
  mounted() {
  },
  methods: {
    verifyBlackAccount() {
      if (!this.account.trim()) {
        this.$Message.warning("请输入账号进行黑号查询");
        return
      }
      Core.Api.BlackAccount.search({account: this.account})
        .then(res => {
          this.result.show = true
          if (res) {
            this.result.txt = '该号码是黑名！谨防受骗！'
          } else {
            this.result.txt = '该号码不在黑名单中！'
          }
        })
        .catch(err => {
          this.$Message.error(err.msg);
        })
    },
    goToOtherGame() {
      window.open('http://localhost:3000', '_blank')
    }
  }
}
</script>

<style lang="scss" scoped>
.blacklist-page {
  background: rgb(245, 245, 245);

  .breadcrumb-holder {
    width: 1200px;
    height: 62px;
    margin: auto;
    .item {
      font-weight: 500;
      font-size: 16px;
      color: #A6ACB3;
      cursor: pointer;
      &.active {
        color: #3A3D41;
      }
    }
    .arrow {
      margin: 0 10px;
      width: 16px;
      height: 16px;
    }
  }

  .sec-01 {
    width: 1200px;
    background: #ffffff;
    margin: auto;
    .tip-box {
      height: 40px;
      background: #FFFAF3;
      border-radius: 6px 6px 0 0;
      font-weight: 500;
      font-size: 12px;
      color: #F58B01;
    }
    .search-holder {
      padding: 80px 0;
    }
    .search-box {
      width: 500px;
      height: 40px;
      border: 1px solid #F58B01;
      border-radius: 25px;
      margin: 0 auto;
      padding: 2px;
      .input {
        padding: 0 10px;
        font-size: 14px;
        color: #8D9197;
        border: none;
        background: transparent;
        height: 100%;
        outline: none;
      }
      .search-btn {
        background: #F58B01;
        border-radius: 18px;
        font-weight: 500;
        font-size: 16px;
        color: #FFFFFF;
        height: 36px;
        padding: 0 13px;
        cursor: pointer;
      }
    }
  }
  .result {
    margin-top: 30px;
    font-weight: 500;
    font-size: 16px;
    color: #F58B01;
    line-height: 22px;
  }
}
</style>
